<template>
    <div class="behavioural-analysis">
        <div class="rl-content white-card">
            <div class="search-box" ref="searchBar">
                <el-form :model="form" ref="form" size="medium" label-width="80px" class="demo-form">
                    <el-row :gutter="20">
                        <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="4">
                            <el-form-item label="查询时间">
                                <el-date-picker style="width: 100%" v-model="form.searchTime" :clearable="true"
                                    valueFormat="yyyy-MM-dd" @change="handleSearch">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
                            <el-form-item label="用户来源">
                                <el-select v-model="form.source" placeholder="" style="width: 100%" @change="handleSearch">
                                    <el-option label="全部" value=""></el-option>
                                    <el-option label="未通过" value="30"></el-option>
                                    <el-option label="审核中" value="20"></el-option>
                                    <el-option label="审核通过" value="10"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
                            <el-form-item label="场景筛选">
                                <el-select v-model="form.scence" placeholder="" style="width: 100%" @change="handleSearch">
                                    <el-option label="全部" value=""></el-option>
                                    <el-option label="未通过" value="30"></el-option>
                                    <el-option label="审核中" value="20"></el-option>
                                    <el-option label="审核通过" value="10"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="white-card table-wrap">
                <div :style="{ height: tableHeight + 'px' }">
                    <el-table :data="showList" height="100%" tooltip-effect="light"
                        :header-cell-class-name="'header_name_style'" :cell-style="{ color: '#000000' }">
                        <el-table-column prop="date" label="日期" min-width="150"></el-table-column>
                        <el-table-column prop="scence" label="场景" min-width="150"></el-table-column>
                        <el-table-column prop="userType" label="用户类型" min-width="150"></el-table-column>
                        <el-table-column prop="userSource" label="用户来源" min-width="150"></el-table-column>
                        <el-table-column prop="visitNum" label="访问人数" min-width="150"></el-table-column>
                        <el-table-column prop="openNum" label="打开次数" min-width="150"></el-table-column>
                    </el-table>
                </div>
                <div class="pager">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="page.currentPage" :page-sizes="[10, 20, 30, 40, 50, 100]"
                        :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                        background></el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { actCountList, getEventType } from "@/api/index";
export default {
    data() {
        return {
            showList: [], // 处理分页用于展示的table数据 list是完整数据
            total: 0, // 数据条数
            form: {
                searchTime: '',
                source: '',
                scence: '',
            },
            tableHeight: "auto",
            page: {
                currentPage: 1,
                pageSizes: 10,
                pageSize: 10,
            },
        }
    },
    created() {
        this.getEventType();
    },
    mounted() {
        this.getHeight();
    },
    destroyed() {
        window.removeEventListener("resize", this.getHeight);
    },
    methods: {
        async getEventType() {
            const params = {

            }
            const res = await getEventType(params);
            if (res.code == 200) {
                console.log('res', res);
            }
        },
        async actCountListFn() {
            const params = {
                currentStartTime: this.form.searchTime + ' 00:00:00',
                currentEndTime: this.form.searchTime + ' 23:59:59',
                pageNo: this.page.currentPage,
                pageSize: 10,
            }
            const res = await actCountList(params);
            if (res.code == 200) {
                console.log('res', res);
            }
        },
        getHeight() {
            this.tableHeight = window.innerHeight - 287;
        },
        handleSearch() {
            console.log('这里触发了搜索', this.form);
            this.actCountListFn();
        },
        handleSizeChange(val) {
            this.page.pageSize = val;
        },
        handleCurrentChange(val) {
            this.page.currentPage = val;
        },
    }
}
</script>

<style lang="scss" scoped>
.behavioural-analysis {
    .rl-content {
        margin: 12px 12px 0 12px;

        .search-box {
            padding: 22px 24px 0 12px;
            border-bottom: 1px solid #e8e8e8;
        }

        .table-wrap {
            /deep/ .header_name_style {
                font-size: 14px;
                font-family: PingFang-SC, PingFang-SC;
                font-weight: bold;
                color: #6c7481;
            }

        }
    }
}
</style>